<script setup>
import {rabbitmqAuth} from "../../stores/counter.js";
import router from "../../router/index.js";
import {ref} from "vue";
import {whoami} from "../../http/rabbitmq/common.js";

const username = ref("")
const password = ref("")

function handleWhoami() {
  whoami().then(response => {
    router.push({path: '/'})
  })
}

function handleLogin() {
  rabbitmqAuth().setBasic(username, password)
  handleWhoami()
}

</script>

<template>
  <div
      style="display: flex; flex-flow: column; align-items: center; justify-content: center; width: 100%; height: 100%">
    <img src="../../assets/64.png" alt="Vue logo" style="width: 64px"/>
    <h1>Embrace Source MQ</h1>
    <br>
    <el-form label-width="auto" style="width: 300px;">
      <el-form-item label="Username">
        <el-input v-model="username"/>
      </el-form-item>
      <el-form-item label="Password">
        <el-input v-model="password" type="password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width: 100%" @click="handleLogin">Login</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>

</style>